<template>
	<PageWrapper dense contentFullHeight contentClass="flex">
		<BasicTable @register="registerTable" @row-click="clickSubTable" class="w-2/4 xl:w-2/4">
			<template #toolbar>
				<a-button type="primary" @click="handleCreate">新增字典</a-button>
			</template>
			<template #bodyCell="{column,  record }">
				<template v-if="column.key === 'action'">
					<TableAction :actions="[
						{
							icon: 'clarity:note-edit-line',
							tooltip: '修改',
							onClick: handleEdit.bind(null, record)
						},
						{
							icon: 'ant-design:delete-outlined',
							color: 'error',
							tooltip: '删除',
							popConfirm: {
								title: '是否确认删除',
								confirm: handleDelete.bind(null, record)
							}
						}
					]" />
				</template>
			</template>
		</BasicTable>
		<DictSubTable ref="dictSubRef" class="w-2/4 xl:w-2/4" />
		<DictDrawer @register="registerDrawer" @success="handleSuccess" />
	</PageWrapper>
</template>
<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import { PageWrapper } from '/@/components/Page';
	import { BasicTable, useTable, TableAction } from '/@/components/Table';
	import { columns, searchFormSchema } from './dict.data';
	import { list, del } from '/@/api/system/dict';
	import { useDrawer } from '/@/components/Drawer';
	import DictDrawer from './DictDrawer.vue';

	import DictSubTable from './DictSubTable.vue';

	import { useMessage } from '/@/hooks/web/useMessage';
	export default defineComponent({
		components: { BasicTable, PageWrapper, DictDrawer, DictSubTable, TableAction },
		setup() {
			const { createMessage } = useMessage();
			const dictSubRef = ref();
			const [registerDrawer, { openDrawer }] = useDrawer();

			const [registerTable, { reload }] = useTable({
				title: '字典列表',
				api: list,
				columns,
				formConfig: {
					labelWidth: 80,
					showResetButton:false,
					autoSubmitOnEnter: true,
					schemas: searchFormSchema
				},
				useSearchForm: true,
				showTableSetting: true,
				bordered: true,
				showIndexColumn: false,
				actionColumn: {
					width: 160,
					title: '操作',
					dataIndex: 'action',
					fixed: undefined
				}
			});

			function handleCreate() {
				openDrawer(true, {
					isUpdate: false
				});
			}
			function handleEdit(record : Recordable) {
				openDrawer(true, {
					record,
					isUpdate: true
				});
			}

			async function handleDelete(record : Recordable) {
				await del({ ids: record.id });
				createMessage.success('删除成功!');
				handleSuccess();
			}

			function clickSubTable(record : Recordable) {
				dictSubRef.value.filterByDictCode(record);
			}

			function handleSuccess() {
				reload();
			}

			return {
				registerTable,
				registerDrawer,
				clickSubTable,
				handleCreate,
				handleEdit,
				handleDelete,
				handleSuccess,
				dictSubRef
			};
		}
	});
</script>